<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box,
		.box1 {
			position: absolute;
			width: 100px;
			height: 100px;
			background-color: aqua;
			top: 100px;
			left: 0;
		}

		.box1 {
			top: 300px;
			height: auto;
			overflow: hidden;
		}
	</style>
</head>

<body>
	<div class="box"></div>
	<div class="box1">
		四大皆空加快速度就分手山东科技福建省掉接口发卡机手打山东科技福克斯东方闪电会计法手机打开费尽口舌大富科技手打飞机上电极法
	</div>
	<script src="./gsap.js"></script>
	<script>
		gsap.to('.box',
			{
				left: 800,
				duration: 3,
				rotation: 360,
				scale: 1.2,
				background: 'red'
			})
		gsap.from('.box1',
			{
				height: 0,
				duration: 3
			}
		)
		// gsap.from('.box',
		// 	{
		// 		left: 800,
		// 		duration: 3,
		// 		rotation: 360,
		// 		scale: 1.2,
		// 		background: 'red'
		// 	})
		// gsap.fromTo('.box',
		// 	{
		// 		left: 100,
		// 	},
		// 	{
		// 		left: 800,
		// 		duration: 3,
		// 		rotation: 360,
		// 		scale: 1.2,
		// 		background: 'red'
		// 	})
	</script>
</body>

</html>